<template>
  <div class="container">
    <!-- 每个 div 的 class 都包含 common-style 以应用共同的样式 -->
    <div class="common-style wow fadeInDown" style="background: rgba(74,145,185,0.3); opacity: 0.35;"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(74,145,185,0.3); opacity: 0.35;"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(74,145,185,0.3);"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(74,145,185,0.3);"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(74,145,185,0.3);"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(74,145,185,0.5);"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(74,145,185,0.5);"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(74,145,185,0.15);"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(74,145,185,0.5);"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(46,210,166,0.8);"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(81,132,247,0.5);"></div>
    <div class="common-style wow fadeInDown" style="background: rgba(66,111,192,0.5);"></div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  name: 'dot',
  mounted () {
    this.animateDots()
  },
  methods: {
    animateDots () {
      const dot1 = this.$refs.dot1
      const dot2 = this.$refs.dot2
      const dot3 = this.$refs.dot3

      gsap.from([dot1, dot2, dot3], {
        x: 100,
        opacity: 0,
        duration: 0.5,
        stagger: 0.2,
        onComplete: () => {
          this.rearrangeDots()
        }
      })
    },
    rearrangeDots () {
      const dot1 = this.$refs.dot1
      const dot2 = this.$refs.dot2
      const dot3 = this.$refs.dot3

      gsap.to(dot1, {
        y: -8,
        duration: 0.5
      })

      gsap.to(dot2, {
        x: -4,
        duration: 0.5
      })

      gsap.to(dot3, {
        x: 0,
        duration: 0.5,
        onComplete: () => {
          this.loopOpacity()
        }
      })
    },

    loopOpacity () {
      gsap.fromTo(
        this.$refs.dot1,
        { opacity: 0.24 },
        {
          opacity: 1,
          duration: 1.5,
          yoyo: true,
          repeat: -1
        }
      )

      gsap.fromTo(
        this.$refs.dot2,
        { opacity: 0.24 },
        {
          opacity: 1,
          delay: 0.5,
          duration: 1.5,
          yoyo: true,
          repeat: -1
        }
      )

      gsap.fromTo(
        this.$refs.dot3,
        { opacity: 0.24 },
        {
          opacity: 1,
          delay: 1,
          duration: 1.5,
          yoyo: true,
          repeat: -1
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.common-style {
  width: 4px;
  height: 22px;
  margin-right: 3px; /* 每个div距离右侧3像素 */
  animation-duration: 0.5s; /* 设置动画持续时间 */
}

/* 容器样式，用于水平布置子元素 */
.container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

/* 为wow.js添加自定义的动画延迟 */
.container .wow:first-child { animation-delay: 0.1s; }
.container .wow:nth-child(2) { animation-delay: 0.2s; }
.container .wow:nth-child(3) { animation-delay: 0.3s; }
.container .wow:nth-child(4) { animation-delay: 0.4s; }
.container .wow:nth-child(5) { animation-delay: 0.5s; }
.container .wow:nth-child(6) { animation-delay: 0.6s; }
.container .wow:nth-child(7) { animation-delay: 0.7s; }
.container .wow:nth-child(8) { animation-delay: 0.8s; }
.container .wow:nth-child(9) { animation-delay: 0.9s; }
.container .wow:nth-child(10) { animation-delay: 1.0s; }
.container .wow:nth-child(11) { animation-delay: 1.1s; }
.container .wow:nth-child(12) { animation-delay: 1.2s; }
</style>
